import React from 'react';
import {Link} from "react-router";
import TableHeader from "../../components/table-header";
export default class Prize extends React.Component {
    constructor(...props) {
        super(...props);
        this.state = {
            list: []
        };
    }

    componentDidMount() {
        $.get('/admin/prize/all')
            .success((list)=> {
                this.setState({list});
            }, 'json');
    }

    handleDelete(index) {
        if (confirm('删除奖品会同时删除中奖信息！是否确认？')) {
            const item = this.state.list[index];
            $.get('/admin/prize/delete', {id: item.prizeId})
                .success((data)=> {
                    alert('删除成功')
                }, 'json')
                .error((e)=> {
                    alert('删除失败');
                }, 'json');
        }
    }

    render() {
        const data = this.state.list.map((item, index)=> {
            return (
                <tr key={index}>
                    <td>{item.prizeId}</td>
                    <td>{item.title}</td>
                    <td>{item.desc}</td>
                    <td>
                        <a href={item.image} target="_blank"><img src={item.image} width="48" height="48" alt=""/></a>
                    </td>
                    <td>
                        {item.chance}
                    </td>
                    <td>
                        <Link to={'/prize/' + item.prizeId + '/post'}>编辑 </Link>
                        <a href="javascript:void(0)" onClick={e=>this.handleDelete(index)}>删除</a>
                    </td>
                </tr>
            );
        });
        return (
            <div className="site-prize prize-index">
                <h2>奖品列表</h2>
                <p>
                    <Link to="/prize/post" className="btn btn-success">添加</Link>
                </p>
                <div className="table-responsive">
                    <table className="table table-bordered">
                        <TableHeader sections={['id', '名称', '简介', '图片', '中奖概率', '操作']}/>
                        <tbody>{data}</tbody>
                    </table>
                </div>
            </div>
        )
    }
}